最後一天了，我們來將最後兩個小區域放上圖片吧
在public區域新增一個img資料夾
將預計要放上的圖片拖到資料夾中並為圖片命名
好的先到<template>區域
我預計要放在box1的小空格中，利用<img>標籤引入圖片

<div class="box1">
     <WeatherBox/>
     <div class="imgarea">
       <img src="../public/img/rabbitimg.png" alt="rabbit" class="imgstyle"/>
     </div>
     <div class="imgarea">
       <img src="../public/img/catimg.png" alt="cat" class="imgstyle"/>
     </div>

 </div>

<img src="../public/img/rabbitimg.png" alt=”rabbit" class="imgstyle" />
src="...” 之中放圖片的來源
alt=”rabbit" 當圖片無法顯示時，則會顯示替代文字rabbit
class=”imgstyle” 表示該圖片套這個樣式

接著來看<style scoped>區域

.imgarea{
  width: 85%;
  height: 150px;
  background-color: #E6DDD3;
  border-radius: 12px;
  box-shadow: 0px 4px 8px #C9B7A6;
  margin-top: 15px;
}


.imgstyle{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填滿容器並保持比例（可能裁切一點） */
  border-radius: 12px;
}

.imgareaa是用來設定區塊樣式的
.imgstyle則是用來設定圖片
想讓圖片符合設定好的區域不能只設定區域樣式而已，這樣圖片可能會過大或過小，可能會被擠壓變形
這裡附上最後的畫面

這兩張圖是我自己畫的，各位可以到pinterest或是unsplash下載喜歡的圖片放上去

經過30天的歷練，對於vue總算有初步的理解和簡單的實作經驗了，這段時間說長不長，畢竟每天都有其他事項要處理，還要趕一篇文出來，每天都忙碌的狀態下不知不覺就到最後一天了，但說短也不短，因為我很常想比賽剩幾天，是否發文沒，來不來的及寫完，一直盼著比賽結束這天的到來，對我就是個矛盾混合體
只能說這過程是趕文章的壓力和成就的喜悅參雜一起，雖然每天的文章內容沒有很多，都是一點小步驟，但當這些小進度慢慢累積，最後完成這個專案當下還是有一些成就感的，感覺很多事都是這樣，要一次完成既困難又很有壓力，所以改成一步步前進，專注當下的過程。
當初要報名時還是有點猶豫的，怕自己撐不完30天，但轉念一想，認為這是挑戰自己的一個機會，與其擔心後面會不會失敗，還不如先跨出第一步勇敢嘗試。

最後，很感謝願意點進來看文章的各位。